<html 
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms"
   xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>CSS: a tabbed interface</title>
      <style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");

/* Put the tab divs all on one line */
div.horiz-tabs-menu div {
  display: inline;
}               

/* style each individual tab */
div.horiz-tabs-menu div a {
    color: black;
    border: 0.1em outset #BBB;  /* Make it look like a button */
    border-bottom: 0.1em solid #CCC;
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    margin-right: 5px;
    padding: 0.2em;
    /* round the top corners - works under FireFox */
    -moz-border-radius: .5em .5em 0em 0em;
 }

/* Make non-selected tabs appear in the background */
div.horiz-tabs-menu div:not(:target) a {
   border-bottom: none;         /* Make the bottom border disappear */
   background: #999;
}               

/* Make the selected (targeted) item or default selection to appear on top */
div.horiz-tabs-menu div:target  a {
   border-bottom: 0.1em solid #CCC;   /* Visually connect tab and tab body */
   background: #CCC;                          /* Set active tab to light gray */
}

/* set non-selected tabs to dark gray */
div.horiz-tabs-menu div:not(:target) a {
   border-bottom: none; /* Make the bottom border disappear */
   background: #999;           /* Set inactive tabs are dark gray */
}

xf|switch xf|case div {
  background: #CCC;             /* Light gray */
  padding: 0.3em;               /* Looks better */
}       
</style>
   </head>
   <body>
      <div class="horiz-tabs-menu">
         <div id="tab1">
            <a  href="#tab1">Tab 1
                 <xf:toggle case="case-1" ev:event="DOMActivate" />
            </a>
         </div>
         <div id="tab2">
            <a href="#tab2">Tab 2
                 <xf:toggle case="case-2" ev:event="DOMActivate" />
            </a>
         </div>
         <div id="tab3">
            <a href="#tab3">Tab 3
                 <xf:toggle case="case-3" ev:event="DOMActivate" />
            </a>
         </div>
      </div>
      <xf:switch>
         <xf:case id="case-1" selected="true()">
            <div>
            1111111111 1111111111 1111111111
            1111111111 1111111111 1111111111
            1111111111 1111111111 1111111111
            1111111111 1111111111 1111111111
            </div>
         </xf:case>
         <xf:case id="case-2">
            <div>
            2222222222 2222222222 2222222222
            2222222222 2222222222 2222222222
            2222222222 2222222222 2222222222
            2222222222 2222222222 2222222222
            </div>
         </xf:case>
         <xf:case id="case-3">
            <div>
            3333333333 3333333333 3333333333
            3333333333 3333333333 3333333333
            3333333333 3333333333 3333333333
            3333333333 3333333333 3333333333
            </div>
         </xf:case>
      </xf:switch>
   </body>
</html>